input{
  border: .125rem solid blue;
  background: lightskyblue;
}
[class^=boss]{
  font-size: 3rem;
  position: relative;
}
.boss1{
  transition: all 1s ease-in
}
.boss1.show{
  opacity: 1;
}
.boss1.hide{
  opacity: 0;
}

.boss2.show{
  animation: boss2-show 1s ease-in-out forwards;
}
.boss2.hide{
  animation: boss2-hide 1s ease-in-out forwards;
}
@keyframes boss2-show {
  from{
    left: -20rem;
    opacity: 0;
  }
  40%{
    left: 2rem;
  }
  to{
    left:0;
    opacity: 1;
  }
}
@keyframes boss2-hide {
  from{
    left: 0;
    opacity: 1;
  }
  60%{
    left: -2rem;
  }
  to{
    left:20rem;
    opacity: 0;
  }
}

.boss3-enter{
  top: -20rem;
  opacity: 0;
}
.boss3-enter-active{
  top: 0;
  opacity: 1;
  transition: all .5s ease-in;
}
.boss3-enter-done{
  top: 0;
  opacity: 1;
}
.boss3-exit{
  top: 0;
  opacity: 1;
}
.boss3-exit-active{
  top: -20rem;
  opacity: 0;
  transition: all .5s ease-out;
}
.boss3-exit-done{
  opacity: 0;
}

[class^=list-item]{
  position: relative;
}
.list-item-enter{
  left: -2rem;
  opacity: 0;
}
.list-item-enter-active{
  left: 0;
  opacity: 1;
  transition: left .5s ease-in;
}
.list-item-enter-done{
  left: 0;
  opacity: 1;
}
.list-item-exit{
  left: 0;
  /*opacity: 1;*/
}
.list-item-exit-active{
  left: -2rem;
  opacity: 0;
  transition: left  .5s ease-out;
}
.list-item-exit-done{
  /*opacity: 0;*/
}










